<template>
  <div class="news">
    <div class="fadeInUp animated">
      <el-carousel indicator-position="none" arrow="never" height="500px">
        <el-carousel-item v-for="item in bannerList" :key="item">
          <div>
            <img
              style="width: 100%; height: 500px"
              :src="item.article_cover"
              alt="Element logo"
            />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, provide, inject, watch } from "vue";
import news from "@/api/news.js";
const allfield = inject("allfield");
const { fieldA, fieldB } = allfield();
const bannerList = ref([]);

const newsAll = async () => {
  const res = await news.newsAll();
  const { banner } = res;
  bannerList.value = banner;
};
onMounted(() => {
  newsAll();
});

provide("myText", bannerList);
</script>
<style scoped lang="scss">
.news {
}
</style>
